import Login from '../components/Login'
import Main from '../components/Main'
import NotFount from '../components/404'
import About from '../components/Main/About'
import Home from '../components/Main/Home'
import Music from '../components/Main/Home/Music'
import New from '../components/Main/Home/New'
import {Navigate ,useRoutes} from 'react-router-dom'

const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/Main',
        element:<Main/>,
        children:[
            {
                path:'/Main/About',
                element:<About/>
            },
            {
                path:'/Main/Home',
                element:<Home/>,
                children:[
                    {
                        path:'/Main/Home/Music',
                        element:<Music/>
                    },
                    {
                        path:'/Main/Home/New',
                        element:<New/>
                    }
                ]
            }
        ]
    },
    {
        path:'*',
        element:<NotFount />
    },
    {
        path:'/',
        element:<Navigate to='login'/>
    },
]

export default  routes
//  首字母大写可以理解为定义了一个组件，这样就可以在里卖运行hook
export const Getroutes = ()=>{
    return useRoutes(routes)
} 

//自定义hook 首字母是use的函数 就可以理解为自定义hooks，在自定义hooks中可以运行hooks
export const useMyRoutes =()=>{
    return useRoutes(routes)
}